<template>
  <div class="system-statistics-container">
    <div class="page-header">
      <h2>系统统计</h2>
      <div class="refresh-action">
        <el-button type="primary" plain :icon="Refresh" @click="fetchAllData">刷新数据</el-button>
      </div>
    </div>

    <el-row :gutter="20">
      <!-- 数据概览卡片 -->
      <el-col :span="24">
        <el-card shadow="hover" class="statistics-card">
          <template #header>
            <div class="card-header">
              <h3>数据概览</h3>
            </div>
          </template>
          <div class="overview-container">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="6">
                <div class="overview-item blue">
                  <div class="item-icon">
                    <el-icon><User /></el-icon>
                  </div>
                  <div class="item-content">
                    <div class="item-value">{{ statistics.userCount || 0 }}</div>
                    <div class="item-label">用户总数</div>
                  </div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12" :md="6">
                <div class="overview-item green">
                  <div class="item-icon">
                    <el-icon><Trophy /></el-icon>
                  </div>
                  <div class="item-content">
                    <div class="item-value">{{ statistics.contestCount || 0 }}</div>
                    <div class="item-label">竞赛总数</div>
                  </div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12" :md="6">
                <div class="overview-item orange">
                  <div class="item-icon">
                    <el-icon><Document /></el-icon>
                  </div>
                  <div class="item-content">
                    <div class="item-value">{{ statistics.questionCount || 0 }}</div>
                    <div class="item-label">题目总数</div>
                  </div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12" :md="6">
                <div class="overview-item purple">
                  <div class="item-icon">
                    <el-icon><DataAnalysis /></el-icon>
                  </div>
                  <div class="item-content">
                    <div class="item-value">{{ statistics.answerCount || 0 }}</div>
                    <div class="item-label">答题总数</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <!-- 用户注册趋势 -->
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="statistics-card">
          <template #header>
            <div class="card-header">
              <h3>用户注册趋势</h3>
            </div>
          </template>
          <div class="chart-container">
            <div ref="userChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>

      <!-- 竞赛创建趋势 -->
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="statistics-card">
          <template #header>
            <div class="card-header">
              <h3>竞赛创建趋势</h3>
            </div>
          </template>
          <div class="chart-container">
            <div ref="contestChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <!-- 题目类型分布 -->
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="statistics-card">
          <template #header>
            <div class="card-header">
              <h3>题目类型分布</h3>
            </div>
          </template>
          <div class="chart-container">
            <div ref="questionTypeChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>

      <!-- 竞赛状态分布 -->
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="statistics-card">
          <template #header>
            <div class="card-header">
              <h3>竞赛状态分布</h3>
            </div>
          </template>
          <div class="chart-container">
            <div ref="contestStatusChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Trophy, Document, DataAnalysis, Refresh } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 删除对不存在模块的引用和 use 方法调用
const userChartRef = ref(null)
const contestChartRef = ref(null)
const questionTypeChartRef = ref(null)
const contestStatusChartRef = ref(null)
const userChart = ref(null)
const contestChart = ref(null)
const questionTypeChart = ref(null)
const contestStatusChart = ref(null)
const statistics = ref({
  userCount: 0,
  contestCount: 0,
  questionCount: 0,
  answerCount: 0
})

// 模拟数据
const userTrendData = ref([
  { date: '2024-12', count: 3 },
  { date: '2025-01', count: 5 },
  { date: '2025-02', count: 7 },
  { date: '2025-03', count: 10 },
  { date: '2025-04', count: 12 },
  { date: '2025-05', count: 15 }
])

const contestTrendData = ref([
  { date: '2024-12', count: 1 },
  { date: '2025-01', count: 2 },
  { date: '2025-02', count: 2 },
  { date: '2025-03', count: 3 },
  { date: '2025-04', count: 4 },
  { date: '2025-05', count: 3 }
])

const questionTypeData = ref([
  { name: '单选题', value: 32 },
  { name: '多选题', value: 24 },
  { name: '判断题', value: 18 },
  { name: '填空题', value: 12 },
  { name: '简答题', value: 6 }
])

const contestStatusData = ref([
  { name: '待审核', value: 2 },
  { name: '进行中', value: 3 },
  { name: '已拒绝', value: 1 },
  { name: '已取消', value: 1 },
  { name: '已结束', value: 4 }
])

// 初始化数据统计
const initStatistics = () => {
  // 模拟数据，实际项目中应调用后端接口
  statistics.value = {
    userCount: 25, // 总用户数
    contestCount: 11, // 总竞赛数 (与 contestTrendData 最后一个月后的累计值可以不同，表示历史总数)
    questionCount: 92, // 总题目数 (与 questionTypeData 各项之和一致)
    answerCount: 150 // 总答题数
  }
}

// 初始化用户注册趋势图表
const initUserChart = () => {
  if (userChartRef.value) {
    userChart.value = echarts.init(userChartRef.value)
    const option = {
      title: {
        text: '近6个月用户注册趋势',
        left: 'center',
        textStyle: {
          fontSize: 14
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: userTrendData.value.map(item => item.date)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '注册用户',
          type: 'line',
          data: userTrendData.value.map(item => item.count),
          smooth: true,
          areaStyle: {
            opacity: 0.3
          },
          itemStyle: {
            color: '#409EFF'
          }
        }
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      }
    }
    userChart.value.setOption(option)
  }
}

// 初始化竞赛创建趋势图表
const initContestChart = () => {
  if (contestChartRef.value) {
    contestChart.value = echarts.init(contestChartRef.value)
    const option = {
      title: {
        text: '近6个月竞赛创建趋势',
        left: 'center',
        textStyle: {
          fontSize: 14
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: contestTrendData.value.map(item => item.date)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '创建竞赛',
          type: 'bar',
          data: contestTrendData.value.map(item => item.count),
          itemStyle: {
            color: '#67C23A'
          }
        }
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      }
    }
    contestChart.value.setOption(option)
  }
}

// 初始化题目类型分布图表
const initQuestionTypeChart = () => {
  if (questionTypeChartRef.value) {
    questionTypeChart.value = echarts.init(questionTypeChartRef.value)
    const option = {
      title: {
        text: '题目类型分布',
        left: 'center',
        textStyle: {
          fontSize: 14
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        top: 'center',
        data: questionTypeData.value.map(item => item.name)
      },
      series: [
        {
          name: '题目类型',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: questionTypeData.value
        }
      ]
    }
    questionTypeChart.value.setOption(option)
  }
}

// 初始化竞赛状态分布图表
const initContestStatusChart = () => {
  if (contestStatusChartRef.value) {
    contestStatusChart.value = echarts.init(contestStatusChartRef.value)
    const option = {
      title: {
        text: '竞赛状态分布',
        left: 'center',
        textStyle: {
          fontSize: 14
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        top: 'center',
        data: contestStatusData.value.map(item => item.name)
      },
      series: [
        {
          name: '竞赛状态',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: contestStatusData.value.map(item => {
            // 为不同状态设置不同颜色
            let color
            switch (item.name) {
              case '待审核': color = '#E6A23C'; break
              case '进行中': color = '#67C23A'; break
              case '已拒绝': color = '#F56C6C'; break
              case '已取消': color = '#909399'; break
              case '已结束': color = '#409EFF'; break
              default: color = '#909399'
            }
            return {
              ...item,
              itemStyle: { color }
            }
          })
        }
      ]
    }
    contestStatusChart.value.setOption(option)
  }
}

// 刷新所有数据
const fetchAllData = () => {
  ElMessage.success('数据已刷新')
  initStatistics()
  initUserChart()
  initContestChart()
  initQuestionTypeChart()
  initContestStatusChart()
}

// 窗口大小变化时重新调整图表大小
const handleResize = () => {
  userChart.value && userChart.value.resize()
  contestChart.value && contestChart.value.resize()
  questionTypeChart.value && questionTypeChart.value.resize()
  contestStatusChart.value && contestStatusChart.value.resize()
}

onMounted(() => {
  initStatistics()
  // 给一点时间让DOM渲染完成
  setTimeout(() => {
    initUserChart()
    initContestChart()
    initQuestionTypeChart()
    initContestStatusChart()
  }, 100)
  
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  userChart.value && userChart.value.dispose()
  contestChart.value && contestChart.value.dispose()
  questionTypeChart.value && questionTypeChart.value.dispose()
  contestStatusChart.value && contestStatusChart.value.dispose()
})
</script>

<style lang="scss" scoped>
.system-statistics-container {
  padding: 20px;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .statistics-card {
    margin-bottom: 20px;
    
    .card-header {
      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }
  }
  
  .overview-container {
    .overview-item {
      display: flex;
      align-items: center;
      padding: 20px;
      border-radius: 10px;
      color: #fff;
      margin-bottom: 20px;
      
      &.blue {
        background: linear-gradient(135deg, #409EFF, #2051e5);
      }
      
      &.green {
        background: linear-gradient(135deg, #67C23A, #3a9619);
      }
      
      &.orange {
        background: linear-gradient(135deg, #E6A23C, #c97a15);
      }
      
      &.purple {
        background: linear-gradient(135deg, #9b59b6, #6c3483);
      }
      
      .item-icon {
        font-size: 28px;
        margin-right: 15px;
      }
      
      .item-content {
        .item-value {
          font-size: 26px;
          font-weight: bold;
          margin-bottom: 5px;
        }
        
        .item-label {
          font-size: 14px;
          opacity: 0.9;
        }
      }
    }
  }
  
  .chart-row {
    margin-bottom: 20px;
  }
  
  .chart-container {
    width: 100%;
    
    .chart {
      width: 100%;
      height: 350px;
    }
  }
}

@media screen and (max-width: 768px) {
  .system-statistics-container {
    .overview-container {
      .overview-item {
        margin-bottom: 10px;
      }
    }
    
    .chart-container {
      .chart {
        height: 250px;
      }
    }
  }
}
</style> 